<template>
  <div class="open-question">
    <!-- 标题区域 -->
    <div class="title-wrapper">
      <div class="title-bar"></div>
      <span class="title-text">开放问题</span>
    </div>

    <!-- 横线装饰 -->
    <div class="divider-wrapper">
      <div class="highlight-line"></div>
    </div>

    <!-- 主体内容 -->
    <div class="content-wrapper">
      <el-form :model="personalHabitInfo" label-position="top">
        <!-- 是否旅游到任何地方？ -->
        <el-form-item label="是否旅游到任何地方？" prop="hasTravelAnywhere">
          <span>{{ personalHabitInfo.hasTravelAnywhere }}</span>
        </el-form-item>

        <!-- 生活信条 -->
        <el-form-item label="生活信条" prop="lifeMotto">
          <span>{{ personalHabitInfo.lifeMotto }}</span>
        </el-form-item>

        <!-- 最喜欢音乐人 -->
        <el-form-item label="最喜欢音乐人" prop="favoriteMusicArtist">
          <span>{{ personalHabitInfo.favoriteMusicArtist }}</span>
        </el-form-item>

        <!-- 在你家里成长是什么感觉 -->
        <el-form-item
          label="在你家里成长是什么感觉"
          prop="familyGrowthFeelingA"
        >
          <span>{{ personalHabitInfo.familyGrowthFeelingA }}</span>
        </el-form-item>

        <!-- 最喜欢的运动 -->
        <el-form-item label="最喜欢的运动" prop="favoriteSportA">
          <span>{{ personalHabitInfo.favoriteSport }}</span>
        </el-form-item>

        <!-- 特殊才能/技能/爱好/兴趣 -->
        <el-form-item
          label="描述您有什么特殊才能、技能、爱好和兴趣"
          prop="specialTalentsSkills"
        >
          <span>{{ personalHabitInfo.specialTalentsSkills }}</span>
        </el-form-item>

        <!-- 最喜欢的书及原因 -->
        <el-form-item label="您最喜欢的书及原因" prop="favoriteBooks">
          <span>{{ personalHabitInfo.favoriteBooks }}</span>
        </el-form-item>

        <!-- 最不喜欢的事物 -->
        <el-form-item label="您最不喜欢什么" prop="dislikesA">
          <span>{{ personalHabitInfo.dislikes }}</span>
        </el-form-item>

        <!-- 人生终极目标和抱负 -->
        <el-form-item label="您的人生终极目标和抱负" prop="lifeGoalAmbition">
          <span>{{ personalHabitInfo.lifeGoalAmbition }}</span>
        </el-form-item>

        <!-- 最喜欢的食物 -->
        <el-form-item label="您最喜欢的食物是什么？" prop="favoriteFoodA">
          <span>{{ personalHabitInfo.favoriteFood }}</span>
        </el-form-item>

        <!-- 为什么想成为捐精者 -->
        <el-form-item label="您为什么想成为捐精者" prop="reasonToBeSpermDonorY">
          <span>{{ personalHabitInfo.reasonToBeSpermDonor }}</span>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { useUserStore } from "@/store/modules/user";
import { defineProps, onMounted, ref } from "vue";
import { openInfo } from "@/api/business/sperm";

const userStore = useUserStore();
const userId = ref();
const personalHabitInfo = ref({});

// 加载状态
const loading = ref(true);

/**
 * 获取开放问题数据
 */
function getList() {
  loading.value = true;
  openInfo({
    userId: userId.value,
  }).then((res) => {
    loading.value = false;
    personalHabitInfo.value = res.data;
  });
}

const props = defineProps({
  userId: {
    type: String,
    required: true,
    default: "",
  },
});

onMounted(() => {
  userId.value = props.userId;
  getList();
});
</script>

<style lang="scss" scoped>
/* ===== 仅对「没写过字体/颜色」的文字补微软雅黑 + #333 ===== */
.open-question {
  font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
  color: #333;
}
/* ========================================================= */

/* 根容器样式 */
.open-question {
  /* 无需额外样式 */
}

/* 标题区域样式 */
.title-wrapper {
  margin-top: 20px;
  display: flex;
  align-items: center;

  .title-bar {
    width: 6px;
    height: 26px;
    background-color: #2b5cab;
  }

  /* 已定义字体颜色，保持不变 */
  .title-text {
    margin-left: 10px;
    font-size: 24px;
    font-weight: bold;
    color: #2b5cab;
  }
}

/* 横线装饰区域样式 */
.divider-wrapper {
  height: 1px;
  background-color: #2b5cab;
  margin-top: 18px;
  position: relative;

  .highlight-line {
    width: 460px;
    height: 5px;
    background: linear-gradient(to right, #2b5cab, #cedbf0);
    border-radius: 2px;
    position: absolute;
    top: 0;
    left: 0;
  }
}

/* 主体内容区域样式 */
.content-wrapper {
  border-radius: 8px;
  border: 1px solid #a2c4e8;
  margin-top: 23px;
  padding: 20px 20px;

  /* 覆盖 el-form-item 的 label 样式：已定义颜色，保持不变 */
  // :deep(.el-form-item__label) {
  //   color: #333;
  //   font-size: 16px;
  //   margin-bottom: 8px;
  // }

  /* 展示内容文字样式：已定义颜色，保持不变 */
  :deep(.el-form-item__content) {
    font-size: 14px;
    color: #333;
    line-height: 1.6;
  }
}
</style>
